<template>
    <div class="list_container">
        <div class="header">
            <div class="header_title">{{ title }}</div>
            <el-input v-model="inputValue" :placeholder="`请输入关键词按回车搜索` + title" style="padding: 0 10px;"></el-input>
        </div>
        <div class="list_content">
            <div class="list_detail">
                <img :src="srcImg" style="border-radius: 10px;" />
                <div style="display: flex;flex-direction: column;justify-content: center; margin-left: 20px;">
                    <div>
                        <span>{{ videoName }}</span>
                        <span>第{{ count }}集</span>
                    </div>
                    <span>观看至{{ schedule }}%</span>
                </div>
            </div>
            <div class="list_detail">
                <img src="../../../assets/1.png" style="border-radius: 10px;" />
                <div style="display: flex;flex-direction: column;justify-content: center; margin-left: 20px;">
                    <div>
                        <span>{{ videoName }}</span>
                        <span>第{{ count }}集</span>
                    </div>
                    <span>观看至{{ schedule }}%</span>
                </div>
            </div>
            <div class="list_detail">
                <img src="../../../assets/1.png" style="border-radius: 10px;" />
                <div style="display: flex;flex-direction: column;justify-content: center; margin-left: 20px;">
                    <div>
                        <span>{{ videoName }}</span>
                        <span>第{{ count }}集</span>
                    </div>
                    <span>观看至{{ schedule }}%</span>
                </div>
            </div>
            <div class="list_detail">
                <img src="../../../assets/1.png" style="border-radius: 10px;" />
                <div style="display: flex;flex-direction: column;justify-content: center; margin-left: 20px;">
                    <div>
                        <span>{{ videoName }}</span>
                        <span>第{{ count }}集</span>
                    </div>
                    <span>观看至{{ schedule }}%</span>
                </div>
            </div>
            <div class="list_detail">
                <img src="../../../assets/1.png" style="border-radius: 10px;" />
                <div style="display: flex;flex-direction: column;justify-content: center; margin-left: 20px;">
                    <div>
                        <span>{{ videoName }}</span>
                        <span>第{{ count }}集</span>
                    </div>
                    <span>观看至{{ schedule }}%</span>
                </div>
            </div>
            <div class="list_detail">
                <img src="../../../assets/1.png" style="border-radius: 10px;" />
                <div style="display: flex;flex-direction: column;justify-content: center; margin-left: 20px;">
                    <div>
                        <span>{{ videoName }}</span>
                        <span>第{{ count }}集</span>
                    </div>
                    <span>观看至{{ schedule }}%</span>
                </div>
            </div>
            <div class="list_detail">
                <img src="../../../assets/1.png" style="border-radius: 10px;" />
                <div style="display: flex;flex-direction: column;justify-content: center; margin-left: 20px;">
                    <div>
                        <span>{{ videoName }}</span>
                        <span>第{{ count }}集</span>
                    </div>
                    <span>观看至{{ schedule }}%</span>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    name: "listMessage",
    data() {
        return {
            srcImg: require('../../../assets/1.png'),
            title: '腾讯视频',
            videoName: '长相思 第一季',
            schedule: '80',
            count: '10',
            inputValue: '',
        };
    },
    created() {

    },
    mounted() {

    },
    methods: {

    },
};
</script>

<style lang='scss' scoped>
.list_container {
    .header {
        border-bottom: 1px solid #e0e0e0;
        padding-bottom: 10px;

        .header_title {
            width: 100%;
            text-align: center;
            font-size: 16px;
            font-weight: 900;
            margin: 10px 0;
        }
    }

    .list_content {
        height: 77vh;
        overflow-y: auto;

        .list_detail {
            display: flex;
            flex-direction: row;
            padding: 5px;
            border-bottom: 1px solid #e0e0e0;
            // border-radius: 10px;
            margin-top: 5px;
        }
    }
    @media screen and (min-width: 2360px) {
        .list_content {
            height: 71vh;

        }
    }

    /* 当屏幕宽度大于2560时 */
    @media screen and (min-width: 2561px) {
        .list_content {
            height: 56vh;

        }
    }
}
</style>